<template>
  <div class="">
    <!-- 第一行：充电状态(1列) + 电池组SOC(2列) -->
    <div class="grid grid-cols-3 mb-8">
      <div class="border p-3 rounded-lg rounded-r-none">
        <div class="text-gray-500 text-sm mb-1">State of charge:</div>
        <div class="text-lg">{{ chargeState }}</div>
      </div>
      <div class="border p-3 rounded-lg col-span-2 rounded-l-none">
        <div class="text-gray-500 text-sm mb-1">Battery pack SOC:</div>
        <div class="text-lg">{{ soc }}%</div>
      </div>
    </div>

    <!-- Battery Info 标题 -->
    <div class="mb-2">
      <h3 class="text-base text-gray-800">Battery Info</h3>
    </div>

    <!-- 第二行：电池信息(3等分) -->
    <div class="grid grid-cols-3 mb-8">
      <div class="border p-3 rounded-lg rounded-r-none">
        <div class="text-gray-500 text-sm mb-1">Total voltage (V):</div>
        <div class="text-lg">{{ totalVoltage }}</div>
      </div>
      <div class="border p-3 rounded-none">
        <div class="text-gray-500 text-sm mb-1">Total current(A):</div>
        <div class="text-lg">{{ totalCurrent }}</div>
      </div>
      <div class="border p-3 rounded-lg rounded-l-none">
        <div class="text-gray-500 text-sm mb-1">Temperature (℃):</div>
        <div class="text-lg">{{ temperature }}</div>
      </div>
    </div>

    <!-- Cell Voltage Analysis 标题 -->
    <div class="mb-2">
      <h3 class="text-base text-gray-800">Cell Voltage Analysis</h3>
    </div>

    <!-- 第三行：电芯电压分析(3等分，第3列空) -->
    <div class="grid grid-cols-3">
      <div class="border p-3 rounded-lg rounded-r-none">
        <div class="text-gray-500 text-sm mb-1">Highest voltage (V):</div>
        <div class="text-lg">
          {{ highestVoltage.value }} ({{ highestVoltage.cell }})
        </div>
      </div>
      <div class="border p-3 rounded-lg col-span-2 rounded-l-none">
        <div class="text-gray-500 text-sm mb-1">Lowest voltage (V):</div>
        <div class="text-lg">
          {{ lowestVoltage.value }} ({{ lowestVoltage.cell }})
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";

// 响应式数据
const chargeState = ref("Charging");
const soc = ref(67);
const totalVoltage = ref("51.20");
const totalCurrent = ref("+8.1");
const temperature = ref("23.6");
const highestVoltage = ref({
  value: "51.20",
  cell: "Cell #2"
});
const lowestVoltage = ref({
  value: "51.20",
  cell: "Cell #5"
});

// 模拟实时数据更新
let intervalId: NodeJS.Timeout | null = null;

const updateData = () => {
  // 模拟数据变化
  soc.value = Math.round(65 + Math.random() * 10);
  totalVoltage.value = (50.5 + Math.random() * 2).toFixed(2);
  totalCurrent.value = (7 + Math.random() * 3).toFixed(1);
  temperature.value = (22 + Math.random() * 5).toFixed(1);

  const voltageBase = 50.5 + Math.random() * 2;
  highestVoltage.value.value = voltageBase.toFixed(2);
  lowestVoltage.value.value = (voltageBase - Math.random() * 0.5).toFixed(2);
};

onMounted(() => {
  // 每5秒更新一次数据，模拟实时监控
  intervalId = setInterval(updateData, 5000);
});

onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
});
</script>

<style scoped></style>
